<template>
	<el-row :gutter="20">
		<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
			<div class="team-trees">
				<el-input placeholder="输入名字进行过滤" v-model="filterText"></el-input>
				<el-tree style="margin-top:10px;" class="filter-tree" :data="list" :props="defaultProps"
					default-expand-all @node-click="nodeClick" ref="tree" :filter-node-method="filterNode">
				</el-tree>
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :md="12" :lg="18" :xl="18">
			<div class="team-trees">
				<el-row>
					<el-col :span="12" class="total">
						<span class="theTitle">统计语句详情</span>
					</el-col>
					<el-col :span="12" class="btnRight">
						<el-button icon="plus" @click="btnAdd" v-if="button.新建">新建</el-button>
						<el-button type="warning" icon="edit" @click="btnEdit" :disabled="isDisabledUpdate"
							v-if="button.编辑">编辑
						</el-button>
						<el-button type="success" icon="check" @click="save" :disabled="isDisabledSave"
							:loading="loading2" v-if="button.新建 || button.编辑">
							保存</el-button>
						&nbsp;&nbsp;
						<el-button type="danger" icon="delete" @click="del" :disabled="isDisabledUpdate"
							v-if="button.删除">删除</el-button>
					</el-col>
				</el-row>

				<el-form ref="modelForm" :model="model" label-width="85px" :rules="modelRule" :inline="false">
					<h4 class="orange">基础信息</h4>
					<el-row>
						<el-col :span="24">
							<el-form-item prop="StatisticalSqlName" label="功能名称">
								<el-input v-model="model.StatisticalSqlName" :disabled="isDisabled">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="0" v-if="false">
							<el-form-item label="备注" prop="Remark">
								<el-input type="input" v-model="model.Remark" :disabled="isDisabled"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="逻辑描述" prop="Describe">
								<el-input type="textarea" v-model="model.Describe" :disabled="isDisabled" :rows="2">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="统计语句" prop="SqlContent">
								<el-input type="textarea" v-model="model.SqlContent" :disabled="isDisabled" :rows="8">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<h4 class="orange" v-if="model.ID>0&&(button.预览 || button.总条数 || button.导出)">
						sql语句执行(执行的是保存之后的sql语句)</h4>
					<el-row v-if="model.ID>0&&(button.预览 || button.总条数 || button.导出)">
						<el-col :span="24" class="btnRight">
							<span v-if="button.预览">
								是否排序:<el-switch v-model="searchInfo.canOrderBy" on-text="" off-text=""></el-switch>
								&nbsp;&nbsp;&nbsp;
								<span v-if="searchInfo.canOrderBy">
									是否正序:<el-switch v-model="searchInfo.asc" on-text="" off-text=""></el-switch>&nbsp;
									排序字段:<el-input v-model="searchInfo.orderBy" style="width:120px;"></el-input>&nbsp;
								</span>
								预览条数:<el-input-number v-model="searchInfo.topVal" style="width: 60px;" :controls="false"
									:max="1000"></el-input-number>
							</span>
							&nbsp;
							<el-button icon="" @click="btnSearch" v-loading="loading3" v-if="button.预览">预览</el-button>
							&nbsp;&nbsp;&nbsp;
							<el-button icon="" @click="btnTotal" v-loading="loading3" v-if="button.总条数">总条数</el-button>
							<span v-if="total!=null" style="color:red;">查询条数:{{total}}</span>
							&nbsp;&nbsp;&nbsp;
							<el-button icon="" @click="btnExport" v-loading="loading3" v-if="button.导出">导出</el-button>
							<span v-if="!!fileUrl">下载路径:<a :href="fileUrl"
									style="text-decoration: underline;">{{fileUrl}}</a></span>
						</el-col>
					</el-row>
					<h4 class="orange" v-if="model.ID>0&&(button.预览 || button.总条数 || button.导出)">预览结果</h4>
					<el-row v-if="model.ID>0&&sqlCols.length>0">
						<el-table ref="tblList" :data="sqlList" style="width: 100%;" v-loading="loading3">
							<el-table-column v-for="item in sqlCols" :key="item" :prop="item" :label="item" width="150">
							</el-table-column>
						</el-table>
					</el-row>
				</el-form>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "SysStatisticalSqlList",
		mixins: [common.baseVM],
		data() {
			return {
				button: {
					新建: true,
					编辑: true,
					删除: true,
					预览: true,
					总条数: true,
					导出: true
				},
				defaultProps: {
					children: 'children',
					label: 'StatisticalSqlName'
				},
				filterText: '',
				list: [],
				model: {
					ID: 0,
					StatisticalSqlName: '',
					Remark: '',
					Describe: '',
					SqlContent: ''
				},
				modelRule: {
					StatisticalSqlName: [{
						required: true,
						message: '请输入功能名称'
					}],
					SqlContent: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.model.SqlContent) {
								return callback(new Error(
									'请输入查询sql语句,内容不能带insert,update,delete,truncate table,drop table等'
								));
							} else {
								return callback();
							}
						},
						trigger: 'blur'
					}]
				},
				isDisabled: true,
				isDisabledUpdate: true,
				isDisabledSave: true,
				searchInfo: {
					id: 0,
					topVal: 10,
					canOrderBy: false,
					asc: false,
					orderBy: ''
				},
				sqlList: [],
				total: null,
				fileUrl: '',

				sqlCols: [],
				loading: false,
				loading2: false,
				loading3: false
			};
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},

		methods: {
			init() {
				this.getList();
			},

			nodeClick(data, node, tree) {
				this.model = JSON.parse(JSON.stringify(data));
				this.isDisabled = true;
				this.isDisabledUpdate = false;
				this.isDisabledSave = true;

				//得到排序字段,第一个字段,之前的空格之后的
				this.setOrderBy();
			},

			setOrderBy() {
				if (this.model == null) return;
				if (!this.model.SqlContent) return;
				var index = this.model.SqlContent.indexOf(',');
				var r = "";
				if (index > 0) {
					var temp = this.model.SqlContent.substr(0, index);
					temp = temp.substr(temp.lastIndexOf(" ")).trim();
					r = temp;
				} else {
					index = this.model.SqlContent.toLowerCase().indexOf('select ');
					if (index == -1) {
						r = '';
					} else {
						var temp2 = this.model.SqlContent.substr(index + 1);
						index = temp2.indexOf(" ");
						if (index == -1) {
							index = temp2.indexOf('\n');
						}
						if (index == -1) {
							r = '';
						} else {
							r = temp2.substr(0, index).trim();
						}
					}
				}
				if (r != '') r = r.replace(/'/g, '').trim();
				this.searchInfo.orderBy = r;
			},

			filterNode(value, data) {
				//console.log(value,data);
				if (!value) return true;
				value = value.toLowerCase();
				var val = data.StatisticalSqlName;
				var pinYin = Mtils.utils.makePy(val).toLowerCase();
				var r = val.indexOf(value) != -1 || pinYin.indexOf(value) != -1;
				return r;
			},

			btnAdd() {
				this.isDisabled = false;
				this.isDisabledUpdate = true;
				this.isDisabledSave = false;
				this.resetVal('model');
			},

			btnEdit() {
				this.isDisabled = false;
				this.isDisabledUpdate = true;
				this.isDisabledSave = false;
			},

			del() {
				this.confirm('确认删除[' + this.model.StatisticalSqlName + ']?',
					() => {
						var post = this.toKeyValue({
							id: this.model.ID
						});
						this.post('api/System/SysStatisticalSqlDel', post).then(data => {
							this.showToast(data.Message, "success");
							this.getList();
						});
					});
			},

			getList(id) {
				this.post("api/System/SysStatisticalSqlList").then((data) => {
					this.list = data.Result;
					if (this.list.length == 0) return;
					this.$nextTick(function() {
						if (id == null || id <= 0 || isNaN(parseInt(id))) {
							this.nodeClick(this.list[0]);
							return;
						}
						id = parseInt(id);
						var selected = null;
						for (var i = 0; i < this.list.length; i++) {
							var item = this.list[i];
							if (item.ID == id) {
								selected = item;
								break;
							}
						}
						this.nodeClick(selected);
					});
				});
			},

			save() {
				this.formValidate('modelForm', () => {
					this.loading2 = true;
					this.post('api/System/SysStatisticalSqlAdd', this.model).then(data => {
						this.showToast(data.Message, "success");
						this.getList(data.Result);
						this.loading2 = false;
					}).catch(error => {
						this.loading2 = false;
					});
				});
			},

			btnSearch() {
				if (this.searchInfo.topVal <= 0) {
					this.showToast("预览条数必须是大于0小于等1000的整数");
					return;
				}
				this.searchInfo.id = this.model.ID;
				this.loading3 = true;
				var post = this.toKeyValue(this.searchInfo);
				this.post("api/System/SearchBySql", post).then(data => {
					this.sqlList = data.Result;
					this.sqlCols = JSON.parse(data.Message);
					if (this.sqlList.length < this.searchInfo.topVal) {
						this.total = this.sqlList.length;
					}
					this.loading3 = false;
				}).catch(error => {
					this.loading3 = false;
				});
			},

			btnTotal() {
				this.loading3 = true;
				this.post("api/System/TotalBySql", this.toKeyValue({
					id: this.model.ID
				})).then(data => {
					this.total = data.Result;
					this.loading3 = false;
				}).catch(error => {
					this.loading3 = false;
				});
			},

			btnExport() {
				this.confirm("确定导出【" + this.model.StatisticalSqlName + "】?",
					() => {
						this.loading3 = true;
						this.post("api/System/ExportBySql", this.toKeyValue({
							id: this.model.ID
						})).then(data => {
							this.fileUrl = data.Result;
							window.open(this.fileUrl);
							this.loading3 = false;
						}).catch(error => {
							this.loading3 = false;
						});
					}
				);
			},
		}
	}
</script>
